import { defineComponent, nextTick, onMounted, ref } from 'vue'
import styles from './caseContent.module.less'
import { getAssetsImages } from '@/utils'
import Masonry from 'masonry-layout'
import imagesloaded from 'imagesloaded'
// 案例
interface tagListItem {
  key: string
  value: string
}
export default defineComponent({
  setup() {
    const tagList = ref<tagListItem[]>([
      {
        key: '1',
        value: '中式古典'
      },
      {
        key: '2',
        value: '现代简约'
      },
      {
        key: '3',
        value: '简欧风格'
      },
      {
        key: '4',
        value: '欧式古典'
      },
      {
        key: '5',
        value: '美式风格'
      },
      {
        key: '6',
        value: '乡村田园'
      },
      {
        key: '7',
        value: '低调奢华'
      },
      {
        key: '8',
        value: '个性混搭'
      },
      {
        key: '9',
        value: '地中海'
      },
      {
        key: '10',
        value: '全部'
      }
    ])
    const selectTag = ref<string>('1')
    const imageList = ref([
      getAssetsImages('anli1.png'),
      getAssetsImages('anli2.png'),
      getAssetsImages('anli3.png'),
      getAssetsImages('anli4.png')
    ])
    onMounted(() => {
      nextTick(() => {
        const grid = document.querySelector('.grid')
        const msnry = new Masonry(grid, {
          itemSelector: '.grid-item',
          columnWidth: 10
        })
        imagesloaded('.grid-item', () => {
          msnry.layout() // 图片加载完成后重新绘制。
        })
      })
    })
    return () => (
      <div class={styles['case-container']}>
        <div class={styles['case-content']}>
          <p class={styles['header-text']} data-aos="fade-up">
            经典案例展示
          </p>
          <ul class={styles['list-tag']}>
            {tagList.value.map(tag => {
              return (
                <li
                  class={`${styles['li-tag']} ${
                    tag.key === selectTag.value ? styles.selected : ''
                  }`}
                  onClick={() => (selectTag.value = tag.key)}
                >
                  {tag.value}
                </li>
              )
            })}
          </ul>

          <div class="grid" data-masonry="{ 'itemSelector': '.grid-item', 'columnWidth': 10 }">
            {imageList.value.map(item => {
              return (
                <img
                  src={item}
                  alt=""
                  class={`${styles['li-item']} grid-item`}
                  data-aos="fade-up"
                  data-aos-delay="100"
                />
              )
            })}
          </div>
        </div>
      </div>
    )
  }
})
